<!doctype html>
<html lang="en">
<head>
    @include('web.layout.head')
    <link rel="stylesheet" href="{{mix('/css/web/user/shop_pictures.css')}}">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>

@include('web.layout.header')
@include('web.layout.user_tab')
<div class="base_member_content">
    <div class="w1200">
        @include('web.layout.seller_nav')
        <div class="nav_right flr">
            <div class="base_content">
                <div class="line_title">商铺图片</div>
                <div class="content">
                    <div class="mrtop">
                        <span class="fl">添加产品所有图片内容</span>
                        <a class="fr btn_add">+ 添加图片</a>
                    </div>
                    <div class="templet_list fl">
                        <ul>
                            @if(count($list)>0)
                                @foreach($list as $key=>$value)
                                    <li>
                                        <div class="img fl">
                                            <img src="{{$value['url']}}">
                                        </div>
                                        <img data-id="{{$value['key']}}" class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                                    </li>
                                @endforeach
                            @else
                                <li>
                                    <p class="text-center">您的店铺暂无图片。</p>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
                <div class="page">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg_h"></div>
<div class="pictures_bombbox">
    <div class="h_top"><h2>上传图片</h2><a class="close_box">×</a></div>
    <div class="fl shu_box mt30">
        &nbsp;
    </div>
    <div class="fl shu_box">
        <span>设置图片</span>
        <img id="btn_uploadimg" src="{{asset('/img/web/user/a11.png')}}">
        <input type="hidden" name="pictures_img" class="pictures_img">
        <p class="jm_error"></p>
    </div>
    <div class="btn_box">
        <div class="btn_cancel close_box">取消</div>
        <div class="btn_confirm delivery_confirm" data-id = "1">确定</div>
    </div>
</div>
<form id="uploadForm" action="{{url('uploads/images')}}" method="post">
    {{csrf_field()}}
    <input style="display: none;" name="image" id="image" type="file" class="inputFile" />
</form>
<input type="hidden" name="is_upload" value="x"/>
@include('web.layout.footer')
<script type="text/javascript">
    $(function(){
        var flag = false;
        //编辑
        $('.btn_add').click(function(){
            var id = $(this).attr('data-id');
            $('.bg_h').show();
            $('.pictures_bombbox').show();
        })
        $('.close_box').click(function(){
            $(".pictures_img").val('');
            $('.pictures_title').val('');
            $('.jm_error').html('')
            $('.bg_h').hide();
            $('.pictures_bombbox').hide();
        });

        $('.delivery_confirm').click(function(){
            var id = $(this).attr('data-id');
            $('.jm_error').html('');

            var pictures_img = $('.pictures_img').val();
            if($.trim(pictures_img) == ''){
                $('.pictures_img').parent().find('.jm_error').html('请选择将要添加的图片');
                return false;
            }

            if (flag== true){
                layer.alert("保存成功", {
                    icon: 1
                }, function () {
                    flag = false;
                    location.reload();
                });
            } else {
                flag = false;
                layer.alert('保存失败', {
                    title:'提示',
                    icon: 2
                });
            }
        });

        // 图片上传点击
        $('#btn_uploadimg').click(function () {
            $('.inputFile').trigger('click');
        });
        // 选择完要上传的文件后, 直接触发表单提交
        $('input[name=image]').on('change', function () {
            if ($.trim($(this).val())) {
                $("#uploadForm").trigger('submit');
            }
        });

        // 图片上传
        $("#uploadForm").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: "{{url('uploads/images')}}",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                // 显示加载图片
                success: function (res) {
                    if (res.status == 0){
                        var img_path = '' + res.path;
                        $(".pictures_img").val(res.path);
                        $("#btn_uploadimg").attr('src',res.path)
                        flag = true;
                    } else {
                        layer.alert('图片上传失败', {
                            title:'提示',
                            icon: 2
                        });
                    }
                },
                error: function () { }
            });
        });
    //删除
        $('.del_img').click(function(){
            var id = $(this).attr('data-id');
            id = id.replace('upload/image/{{session('user_id')}}/', '');
            console.log(id);

            if (!id || id.indexOf('upload/image')){
                layer.alert('删除失败！请刷新页面后重试！', {
                    icon: 2
                }, function () {
                    location.reload();
                });
            }
            var url = "{{ url('member/seller/pictures/deletePicture') }}";
            console.log(url);
            layer.confirm('确定删除？', {
                btn: ['确定', '取消'] //可以无限个按钮
            }, function (index) {
                $.ajax({
                    url: url,
                    type: 'post',
                    dataType: 'json',
                    data: {'_token':"{{csrf_token()}}",'id':id },
                    success: function (data) {
                        console.log(data);

                        if (0 == data.code) {
                            layer.alert("删除成功", {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }, function (index, layero) {
                layer.close(index);
            });
        });

    })
</script>
</body>
</html>